<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>查询图书</title>
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>
    <link rel="icon" href="images/search.png" type="img/x-ico" />
</head>

<body>

  <ul>
    <li><a class="active" href="Student.html">返回上一页</a></li>
    <li><a href="">查询图书</a></li>
  </ul>
  <div class="search">
    <input type="text" id="sou" placeholder="搜索">
    <input type="text" id="bookWareId" placeholder="输入图书id">
    <input type="text" id="bookName" placeholder="输入图书名称">
    <input type="text" id="bookAuthor" placeholder="输入图书作者">
    <input type="text" id="bookPublisher" placeholder="输入图书出版社">
    <input type="text" id="bookType" placeholder="输入图书类型">&nbsp;
      <input type="button" id="sure" value="查询" >
  </div>
<div id="t">
    <table id="table" class="mytable" border="2" bgcolor="#f0f8ff"></table>
</div>
</body>

</html>

<style>
  body {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    /*设置字体为sans-serif*/
    background-image: url(images/library.jpg);
    background-size: 100% 100%;
    background-attachment: fixed;
    /*背景图片尺寸为覆盖cover*/
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }

  li {
    float: left;
  }

  li a,
  .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  li a:hover,
  .user:hover,
  .dropdown:hover {
    background-color: #111;
    /*鼠标移动时背景颜色*/
  }

  #sou {
    background-image: url('images/searchicon.png');
    /* 搜索按钮图标 */
    background-position: 5px 1px;
    /* 定位搜索按钮 */
    background-repeat: no-repeat;
    /* 不重复图片*/
    width: 100%;
    font-size: 20px;
    /* 提示文字大小 */
    padding: 15px 20px 15px 20px;
    border: 4px solid #ddd;
    margin-bottom: 12px;
  }

  .search {
    width: 20%;
    margin: 50px auto;
    margin-left: 300px;
    /*搜索栏的位置*/
    display: flex;
    /**/
  }

  .search input {
    float: left;
    flex: 4;
    height: 40px;
    outline: none;
    border: 1px solid white;
    box-sizing: border-box;
    padding-left: 10px;
  }

  .search button {
    float: right;
    flex: 1;
    height: 30px;
    background-color: rgb(63, 224, 245);
    color: white;
    border-style: none;
    outline: none;
  }

  .search button i {
    font-style: normal;
  }

  .search button:hover {
    font-size: 20px;
    background-color: rgb(63, 224, 245);
  }

  #t{
      padding-left:18%;
  }
  mytable {
      width: 500px;
      border: 2px;
      text-align: center;
      border-collapse: collapse;
      background-color: cornsilk;
      padding-left:20%;
  }

  .mytable tr {
      width: 100px;
      padding-left:15%;
  }
  #sure{
      text-align: center;
      background: transparent;
      border: none;
      outline: none;
      font-size: 15px;
      color: #03a9f4;
      background: rgb(190, 221, 247);
      padding: 4px 4px;
      cursor: pointer;
      /*光标呈现为指示链接的指针（一只手）*/
      border-radius: 10px;
      position: relative;
      top: auto;
  }

  #yue{
      text-align: center;
      background: transparent;
      border: none;
      outline: none;
      font-size: 15px;
      color: #03a9f4;
      background: rgb(190, 221, 247);
      padding: 4px 4px;
      cursor: pointer;
      /*光标呈现为指示链接的指针（一只手）*/
      border-radius: 10px;
      position: relative;
      top: auto;
  }

</style>

<script>
  $("#sure").click(function () {
    var bookware = {
      bookWareId:$("#bookWareId").val(),
      bookName:$("#bookName").val(),
      bookAuthor:$("#bookAuthor").val(),
      bookPublisher:$("#bookPublisher").val(),
      bookType:$("#bookType").val()
    }
    var html = "<tr><th>图书ID</th><th>图书名称</th><th>图书ISBN</th><th>图书作者</th><th>图书出版社</th><th>图书类型</th><th>图书价格</th><th>图书总量</th><th>已借出</th><th>历史总借出</th><th>图书评分</th><th>操作</th></tr>"
    $.ajax({
      url:"http://localhost:8080/bookware/findbookware",
      type:"post",
      dataType: 'json',
      data: JSON.stringify(bookware),
      contentType: "application/json",

      success:function (res) {
        alert(res.msg)
        if(res.msg=="查询图书成功") {
          for (var i = 0; i < res.data.length; i++) {
            html = html + "<tr><td>" + res.data[i].bookWareId + "</td><td>" + res.data[i].bookName + "</td><td>" + res.data[i].bookISBN  + "</td><td>" +
                    res.data[i].bookAuthor +"</td><td>" + res.data[i].bookPublisher +"</td><td>" + res.data[i].bookType + "</td><td>" +
                    res.data[i].bookPrice +"</td><td>" + res.data[i].bookTotal + "</td><td>" + res.data[i].bookLending + "</td><td>" +
                    res.data[i].bookHistory + "</td><td>" + res.data[i].bookGrade + "</td><td>"+"<button id='yue'>预约</button>"+"</td></tr>";

          }
            $("#table").html(html)
        }else {
            $("#table").html("")
        }
      },
      error: function (res) {
        alert("JSON数据获取失败，请联系管理员！");
      }
    })
  })
  $(function () {
    $(document).on("click", "#yue", function () {
      var id = $(this).parents("tr").find("td").eq(0).html();
      var bookwareAndUser = {
        userId:$.cookie('student'),
        bookWareId:id
      }
      console.log(bookwareAndUser.bookWareId,bookwareAndUser.userId)
      $.ajax({
        url: "http://localhost:8080/bookware/order",
        type: "post",
        dataType: 'json',
        data: JSON.stringify(bookwareAndUser),
        contentType: "application/json",
        success: function (res) {
          alert(res.msg)
        },
        error: function (res) {
          alert("JSON数据获取失败，请联系管理员！");
        }
      })
    })
  })
  // $("#Yue").click(function () {
  //   var bookwareAndUser = {
  //     userId:$.cookie('student'),
  //     bookWareId:
  //   }
  //   $.ajax({
  //     url: "http://localhost:8080/bookware/order",
  //     type: "post",
  //     dataType: 'json',
  //     data: JSON.stringify(bookwareAndUser),
  //     contentType: "application/json",
  //     success: function (res) {
  //       alert(res.msg)
  //     },
  //     error: function (res) {
  //       alert("JSON数据获取失败，请联系管理员！");
  //     }
  //   })
  // })

</script>